<template>
  <a-modal :visible="visibleEdit" :title="titleSize" :centered="true" @ok="handleEdit" @cancel="closeEdit" :width="700" destroyOnClose>
    <a-form>
      <a-form-item label="姓名" required>
        <a-input v-model="editAdds.contactName" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="联系电话" required>
        <a-input v-model="editAdds.contactPhone" :maxLength="11" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="省市区" required>
        <a-cascader :options="pcaOptions" :value="pcaDefault" placeholder="请选择省市区" @change="pcaChange" />
      </a-form-item>
      <a-form-item label="详细地址" required>
        <a-input v-model="editAdds.address" placeholder="请输入详细地址" />
      </a-form-item>
      <a-form-item>
        <a-checkbox @change="checkDefault" :checked="logDefault"> 设为默认地址 </a-checkbox>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { getAreaData, saveLogistic } from '@/api/box/api'
export default {
  props: {
    unionId: {
      type: String,
      default: '',
      require: false,
    },
    titleSize: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      userInfo: Vue.ls.get(USER_INFO),
      pcaOptions: [],
      pcaDefault: [],
      editAdds: {},
      logDefault: false,
      visibleEdit: false,
    }
  },
  created() {
    this.editAddress()
  },
  methods: {
    show(item) {
      console.log(item)
      this.editAdds = JSON.parse(JSON.stringify(item))
      if (this.editAdds.id) {
        this.logDefault = this.editAdds.id == 1 ? true : false
      } else {
        this.logDefault = false
      }
      this.pcaDefault = [item.province, item.city, item.district]
      this.visibleEdit = true
    },
    // 编辑地址
    async editAddress(item) {
      if (this.pcaOptions.length === 0) {
        const result = await this.getAreaData()
        if (result.code === 0) {
          this.pcaOptions = result.data
        } else {
          this.$message.error(result.msg)
        }
      }
    },
    // 省市区数据
    getAreaData() {
      return getAreaData()
        .then((res) => {
          return res
        })
        .catch((err) => {
          console.log('省市区数据:' + err)
        })
    },
    // 设置默认地址
    checkDefault(e) {
      // console.log(`checked = ${e.target.checked}`)
      this.logDefault = e.target.checked
    },
    // 编辑地址确定
    handleEdit() {
      if (this.editAdds.contactName && this.editAdds.contactPhone && this.editAdds.address && this.pcaDefault.length > 0) {
        const data = {
          requestData: {
            address: this.editAdds.address,
            city: this.pcaDefault[1],
            contactName: this.editAdds.contactName,
            contactPhone: this.editAdds.contactPhone,
            district: this.pcaDefault[2],
            logDefault: this.logDefault ? 1 : 0,
            province: this.pcaDefault[0],
          },
          user_id: this.userInfo.id,
        }
        if (this.editAdds.id) {
          data.requestData.id = this.editAdds.id
        } else if (this.unionId !== '') {
          data.requestData.unionId = this.unionId
        }
        saveLogistic(data)
          .then((res) => {
            if (res.code === 0) {
              this.$message.success('成功！')
              this.closeEdit()
              this.$emit('refreshList', true)
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((err) => {
            console.log('编辑地址确定：' + err)
          })
      } else {
        this.$message.error('请填写全部地址信息！')
      }
    },
    // 关闭地址编辑
    closeEdit() {
      this.visibleEdit = false
      this.editAdds = {}
      this.pcaDefault = []
      this.logDefault = false
    },
    // 变更省市区
    pcaChange(value) {
      console.log(value)
      this.pcaDefault = value
    },
  },
}
</script>
